import React, { useState, useEffect } from 'react'
import Head from 'next/head'
import { Row, Col, List, Breadcrumb, Spin } from 'antd'
import Header from '../components/Header'
import Author from '../components/Author'
import Footer from '../components/Footer'

import axios from 'axios'
import servicePath from '../config/apiUrl'
import Link from 'next/link'

import { marked } from 'marked'
import hljs from "highlight.js";
import 'highlight.js/styles/monokai-sublime.css';
import { CalendarTwoTone, FolderOpenTwoTone, FireTwoTone, RightCircleTwoTone } from '@ant-design/icons'

const ArticleList = (list) => {

    const [mylist, setMylist] = useState(list.data);
    const [loading, setLoading] = useState(false)

    const goLoading = () => {

        setLoading(true)
    }


    const renderer = new marked.Renderer();

    marked.setOptions({
        renderer: renderer,
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        sanitize: false,
        xhtml: false,
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }

    });

    useEffect(() => {
        setMylist(list.data)
    })

    return (
        <>
            <Head>
                <title>技术 | a_liao的博客</title>
                <link rel="icon" href="../static/favicon.ico" mce_href="../static/favicon.ico" type="image/x-icon" />
            </Head>
            <Header />
            <Row className="comm-main" type="flex" justify="center">
                <Col className="comm-left"  xs={24} sm={24} md={16} lg={18} xl={14}  >
                    <div>
                        <div className="bread-div">
                            <Breadcrumb>
                                <Breadcrumb.Item><Link href="/">首页</Link></Breadcrumb.Item>
                                <Breadcrumb.Item>技术分享</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>

                        <List
                            itemLayout="vertical"
                            dataSource={mylist}
                            renderItem={item => (
                                <List.Item>
                                    <Spin spinning={loading}>
                                        <div className="list-title" onClick={goLoading}>
                                            <Link href={{ pathname: '/detailed', query: { id: item.id } }}>
                                                <a>{item.title}</a>
                                            </Link>
                                        </div>
                                        <div className="list-icon">
                                            <span><CalendarTwoTone />{item.addTime}</span>
                                            <span><FolderOpenTwoTone />{item.typeName}</span>
                                            <span><FireTwoTone />{item.view_count}人</span>
                                        </div>
                                        <div className="list-context"
                                            dangerouslySetInnerHTML={{ __html: marked(item.introduce) }}
                                        ></div>
                                        <div className="list-go">
                                            <RightCircleTwoTone />
                                            <span onClick={goLoading}>
                                                <Link href={{ pathname: '/detailed', query: { id: item.id } }}>
                                                    查看全文
                                                </Link>
                                            </span>
                                        </div>
                                    </Spin>
                                </List.Item>
                            )}
                        />

                    </div>
                </Col>

                <Col className="comm-right"  xs={0} sm={0} md={7} lg={5} xl={4}>
                    <Author />
                </Col>
            </Row>
            <Footer />
            <style>{`
            .comm-left{
                background-color: #FFF;
                padding:.3rem;
                border-radius: .3rem;
                border:1px solid #eee;
            }
            .comm-right{
                background-color: #FFF;
                margin-left: .5rem;
                padding:.3rem;
                border-radius: .3rem;
                border-bottom:1px solid #eee;
                }
            .comm-box{
                background-color: #FFF;
                margin-left: .5rem;
                padding:.3rem;
                border-radius: .3rem;
                border:1px solid #eee;
            
            
            }
            .comm-main{
                margin-top: .5rem;
            }
            .list-title{
                font-size:1.3rem;
                color: #404040;
                padding: 0 0.5rem;
            }
            .list-context{
                color:#777;
                padding:.5rem;
            }
            .list-icon{
                padding:.5rem 0;
                color:#AAA;
            }
            .list-icon span{
                display: inline-block;
                padding: 0 10px;
            }
            code {
                display: inline-block ;
                background-color:#fff5f5;
                border-radius:3px;
                padding-left: 5px;
                padding-right: 5px;
                color:#ff502c;
                margin: 0px 3px;
                line-height: 1.1rem;
                font-size: .87rem;
            }
            .list-go{
                padding-left: 35rem;
            }
            `}</style>
        </>
    )

}

ArticleList.getInitialProps = async (context) => {

    let id = parseInt(context.query.id)
    const promise = new Promise((resolve) => {
        if (id) {
            axios(servicePath.getListById+id).then(
                (res) => resolve(res.data)
            )

        } else {
            console.log('error.....')
            resolve({ article_content: 'Id Error' })
        }
    })
    return await promise
}

export default ArticleList
